<#include "../head_top.ftl">
		<title>
            Html5 Web Chart online.
        </title>
        <meta name="description" content="Tool for generate html5 web chart for the given data online.">
        <meta name="keywords" content="HTML5, HTML5 Web Chart, Web Chart">
<#include "../head_down.ftl">
    
    <body>
		<#include "/template/common/navigator.ftl">
        <div class="container">
            <div class="row">
                <div class="span10">
                    <div id="listing-post-container">
						<h1>Generate web chart for the given data</h1>
						<p></p>
						<p></p>
						<p></p>		
						<p>Tool for generate web chart for the given data online. Don't know how to use? <a href="http://www.lovees.cc/content/how-to-generate-web-chart" target="_blank">see here</a></p>
						<#if "${chartLabels!''}"==''>
							<!-- show example content -->
							<#if randomExample==0>
								<#include "html5_web_chart_default_line_data.ftl">
							<#else>
								<#include "html5_web_chart_default_column_data.ftl">
							</#if>
						<#else>
							<form method="post" action="html5_web_chart" id="form1">
								<table>
									<tr>
										<td>
											Data Type:
											<select name="dataType" id="dataType" onchange="selectChangeAction(this)">
												<option value="lineData"<#if "${dataType!''}"=="lineData"> selected</#if>>Line Data</option>
												<option value="columnData"<#if "${dataType!''}"=="columnData"> selected</#if>>Column Data</option>
											</select>
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
											First <label id="lineOrColumn"><#if "${dataType!'lineData'}"=="lineData">Column<#else>Line</#if></label> is label: 
											<input type="checkbox" name="firstDataIsLabel" <#if "${firstDataIsLabel!''}"=='true'>checked</#if> id="firstDataIsLabel" value="true">
										</td>
									</tr>
									<tr>
										<td>
											Labels:
											<input type="text" size="94" name="labels" id="labels" value="${labels!''}">
										</td>
									</tr>								
									<tr id="postTr">
										<td>
											Data:
											<textarea cols="105" rows="15" name="data" id="data">${data!''}</textarea>
										</td>
									</tr>
									<tr>
										<td align="center">
											<select name="chartType" id="chartType">
												<option value="line"<#if "${chartType!''}"=="line"> selected</#if>>Line Chart</option>
												<option value="bar"<#if "${chartType!''}"=="bar"> selected</#if>>Bar Chart</option>
												<option value="horizontalBar"<#if "${chartType!''}"=="horizontalBar"> selected</#if>>Horizontal Bar Chart</option>
												<option value="doughnut"<#if "${chartType!''}"=="doughnut"> selected</#if>>Doughnut Chart</option>
												<option value="pie"<#if "${chartType!''}"=="pie"> selected</#if>>Pie Chart</option>
												<option value="radar"<#if "${chartType!''}"=="radar"> selected</#if>>Radar Chart</option>
												<option value="polarArea"<#if "${chartType!''}"=="polarArea"> selected</#if>>Polar-area Chart</option>
											</select>
											<input type="button" value="Gererate Chart" onclick="doSubmit()"/>
										</td>
									</tr>
								</table>
							</form>
							<div style="width:100%">
								<div>
									<canvas id="canvas" height="450" width="600"></canvas>
								</div>
							</div>
							<script>
								var lineChartData = {
									labels : [${chartLabels!''}],
									datasets : [
										<#assign index=0>
										<#list chartDatas as chartData>
										{											
											label: "${chartLabelArr.get(index)!''}",	
											
											<#if chartType=="line">
											fill : false,											
											lineTension: 0.1,
								            backgroundColor: "rgba(255,255,255,0.4)",
								            borderColor: "${fillColor.get(index)}",
								            borderCapStyle: 'butt',		
								            borderDash: [],
								            borderDashOffset: 0.0,
								            borderJoinStyle: 'miter',
								            pointBorderColor: "${fillColor.get(index)}",
								            pointBackgroundColor: "#fff",
								            pointBorderWidth: 1,
								            pointHoverRadius: 5,
								            pointHoverBackgroundColor: "${fillColor.get(index)}",
								            pointHoverBorderColor: "${fillColor.get(index)}",
								            pointHoverBorderWidth: 2,
								            pointRadius: 1,
								            pointHitRadius: 10,
								            <#elseif chartType=="bar" || chartType=="horizontalBar">
								            backgroundColor: "${fillColor.get(index)}",
								            borderColor: "${fillColor.get(index)}",
								            borderWidth: 1,
								            hoverBackgroundColor: "${fillColor.get(index)}",
								            hoverBorderColor: "${fillColor.get(index)}",
								            <#elseif chartType=="radar">
								            backgroundColor: "${fillColor.get(index)}",
								            borderColor: "${fillColor.get(index)}",
								            pointBackgroundColor: "${fillColor.get(index)}",
								            pointBorderColor: "#fff",
								            pointHoverBackgroundColor: "#fff",
								            pointHoverBorderColor: "${fillColor.get(index)}",
								            <#elseif chartType=="polarArea">
								            backgroundColor: [
									            ${colorsStr!''}
									        ],
									        <#elseif chartType=="doughnut" || chartType=="pie">
									        backgroundColor: [
									            ${colorsStr!''}
									        ],
									        hoverBackgroundColor: [
									            ${colorsStr!''}
									        ],
								            </#if>
									
											data : [${chartData!''}]											
										}
										<#if index<chartDatas.size()-1>
										,
										</#if>
										<#assign index=index+1>
										</#list>
									]
								}
								window.onload = function(){
									var ctx = document.getElementById("canvas").getContext("2d");
									var myLineChart = new Chart(ctx, {
									    type: '${chartType!''}',
									    data: lineChartData,
									    options: {responsive: true}
									});
								}
							</script>
						</#if>
                    </div>
                </div>text
                <!--/span10 -->
                <#include "/template/tool/tool_right.ftl">
                <!--/.span4 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /container -->
		<#include "/template/common/tail.ftl">
    </body>
    <!-- end of body -->
	<script>
		String.prototype.trim=function()
		{
			 return this.replace(/^\s+/g,"").replace(/\s+$/g,"");
		}
		function selectChangeAction(obj){
			if(obj.value=="lineData"){
				document.getElementById("lineOrColumn").innerText="Column";
			}else{
				document.getElementById("lineOrColumn").innerText="Line";
			}
		}
		function doSubmit(action){
			if(document.getElementById("data").value.trim()==""){
				alert("data is needed.");
				return;
			}
			document.getElementById("form1").submit();
		}
	</script>
</html>